<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.lb {
				width: 640px;
				margin: auto;
			}
			
			img {
				width: 640px;
				height: 400px;
			}
			
			#left-arrow {
				position: relative;
				top: -230px;
				z-index: 999;
				display: inline-block;
				width: 50px;
				height: 50px;
				cursor: pointer;
			}
			
			#right-arrow {
				position: relative;
				top: -230px;
				right: -540px;
				z-index: 999;
				display: inline-block;
				width: 50px;
				height: 50px;
				cursor: pointer;
			}
			
			
			
			span {
				display: inline-block;
				position: relative;
				font-size: 20px;
				text-align: center;
				width: 25px;
				font-family: arial;
				left: 210px;
				border-radius: 50%;
				/*background-color:white;*/
				color: white;
				border: 1px solid white;
				margin-left: 15px;
				cursor: pointer;
				top: -120px;
			}
		</style>
	</head>

	<body>
		<div class="lb">
			<img src="img/1.jpg" id="img" />
			<img src="img/btn_1.jpg" id="left-arrow" />
			<img src="img/btn_2.jpg" id="right-arrow" />
			<div id="num-btn"><span style="background-color: #f00;">1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
		</div>
		<script type="text/javascript">
			var left = document.getElementById("left-arrow");
			var right = document.getElementById("right-arrow");
			var img = document.getElementById("img");
			var index = 1;
			var btns = document.getElementById("num-btn").childNodes;
			for(var i = 0;i<btns.length;i++){
				btns[i].onclick = (function() {
					var j = i + 1;
					return function() {
						index = j;
						img.src = "img/" + index + ".jpg"
						changebg();
					}
				})();

			}

			function changebg() {
				for(var i=0; i < btns.length; i++) {
					btns[i].style.background = "";
				}
				btns[index - 1].style.background = "#f00";
			}

			var moveLeft = function() {
				index++;                                          
				if(index > 5) index = 1;
				img.src = "img/" + index + ".jpg"
				changebg();
			}
			right.onclick = moveLeft;
			left.onclick = function() {
				index--;
				if(index < 1) index = 5;
				img.src = "img/" + index + ".jpg"
				changebg();
			}
			var timer = setInterval(moveLeft, 1000);
			var lb = document.getElementsByClassName("lb")[0];
			lb.onmouseover = function() {
				clearInterval(timer);
			};
			lb.onmouseout = function() {
				timer = setInterval(moveLeft, 1000);
			}
		</script>
	</body>

</html>